<template>
    <div class="header">
         <div class="header-left">
             <span class="iconfont back-icon">&#xe624;</span>
         </div>
         <div class="header-input">
             <span class="iconfont">&#xe632;</span>
             输入城市/景点/游玩主题
         </div>
         <router-link to="/city">
            <div class="header-right">
                {{city}}
                <span class="iconfont arrow-icon">&#xe64a;</span>
            </div>
         </router-link>
    </div>
</template>

<script>
    export default {
        name:"HomeHeader",
        props:["city"]
    }
    // 1rem=html font-size=50px
</script>

<style lang="stylus" scoped> 
   @import "~styles/varibles.styl" 
   .header{
       line-height:0.86rem;
       display:flex;
       background :$bgColor;
       color:#fff;
       .header-left{
           width:0.64rem;
           text-align center;
           .back-icon{
               text-align center;
               font-size:0.4rem;
           }
       }
       .header-input{
           flex:1;
           background :#fff;
           border-radius :0.1rem;
           line-height :0.64rem;
           height :0.64rem;
           margin-left :0.2rem;
           margin-top :0.11rem;
           color:#ccc;
           padding-left :0.2rem

       }
       .header-right{
           width:1.24rem;
           float:right;
           text-align:center;
           color:#fff;
           .arrow-icon{
               font-size :0.24rem;
               margin-left :-0.05rem
           }
       }
   }

   
</style>